今天的主題：準備工具 + 定義資料結構
第一步：準備開發工具
1.Node.js
從 Node.js 官網下載 LTS 版本。
安裝後打開終端機輸入：
node -v
npm -v
出現版本號代表成功。

2.Visual Studio Code (VS Code)
從 VS Code 官網下載並安裝，用它來編輯程式碼。

3.瀏覽器（Chrome/Edge）
用來測試成果，資料會存進瀏覽器的 localStorage。

第二步：建立專案
在終端機輸入：
npm create vite@latest calorie-journal -- --template react
cd calorie-journal
npm install
npm run dev
打開瀏覽器 → 前往 http://localhost:5173 ，就能看到 React 的預設畫面。

第三步：定義一筆紀錄要包含哪些欄位
一筆飲食紀錄至少需要：

• 日期：哪一天吃的
• 名稱：食物名稱（必填）
• 份量：選填，例如 150g
• 熱量：必填，單位 kcal
• id：自動生成，用來區分每筆資料

第四步：建立資料模型
在 src 底下新增一個資料夾 models，裡面新建檔案 entry.js：
export function createEntry({ name, serving, kcal, date }) {
if (!name) throw new Error("餐點名稱不能空白");
if (isNaN(kcal)) throw new Error("熱量必須是數字");

return {
id: crypto.randomUUID(), // 自動生成唯一 id
date: date || new Date().toISOString().split("T")[0], // 預設今天
name,
serving: serving || "",
kcal: Number(kcal)
};
}

第五步：在 App.jsx 測試
打開 src/App.jsx，引入並加一個測試按鈕：
import { createEntry } from "./models/entry";

function App() {
const handleTest = () => {
const entry = createEntry({
name: "雞胸肉",
serving: "150g",
kcal: 210
});
console.log(entry);
alert("新增成功：" + entry.name + " → " + entry.kcal + " kcal");
};

return (


測試 createEntry


);
}

export default App;

執行：npm run dev
瀏覽器按下按鈕 → 會彈出提示，並在 Console 印出完整紀錄：

{
"id": "xxxx-uuid",
"date": "2025-09-16",
"name": "雞胸肉",
"serving": "150g",
"kcal": 210
}

今天完成的目標

1. 安裝好 Node.js、VS Code、瀏覽器
2. 建立專案並啟動
3. 規劃一筆飲食紀錄的格式
4. 成功用程式生成一筆紀錄